<template>
    <div class="head wrapper-medias">
        <div class="gl-title">
            <!--后退按钮-->
            <!--<span
                    v-show="hasBackFlg == true"
                    class="iconfont zuojiantou gl-back"
                    @click="goPrev"
            ></span>-->
            <!--标题-->
            <img src="../assets/image/aichat/robot.png" width="43" height="38">
            <span class="gl-title-txt">{{ tsTitleTxt }}</span>
            <!--右侧关闭按钮-->
            <span
                    class="iconfont icon-guanbi gl-close"
                    v-show="tsBtnTxt == ''"
            ></span>
            <!--右侧文字按钮-->
            <span class="txt-btn" @click="btnCk">{{ tsBtnTxt }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        props: {
            tsTitleTxt: {
                type: String,
                default: "",
            },
            tsBtnTxt: {
                type: String,
                default: "",
            },
            backType: {
                type: String,
                default: "history",
            },
            hasBackFlg: {
                type: Boolean,
                default: true,
            },
        },
        data() {
            return {};
        },
        methods: {
            btnCk() {
                this.$emit("emBtnCk");
            },
            goPrev() {
                if (this.backType === "custom") {
                    this.$emit("emGoPrev");
                } else {
                    history.go(-1);
                }
            },
        },
    };
</script>

<style scoped lang="less">
    .head {
        height: auto;
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        z-index: 99;
    }

    .gl-title {
        height: 82px;
        position: relative;
        /*background-image: linear-gradient(to right, #B2CBF4, #C4EFFF);*/
        background-color: white;
        img {
            margin-top: 22px;
            margin-right: 15px;
            margin-left: 15px;
            float: left;
        }
    }

    .gl-back {
        position: absolute;
        left: 0px;
        top: 50%;
        font-size: 12px;
        padding: 8px;
        transform: translateY(-50%);
    }

    .gl-back:before {
        color: #222;
    }

    .gl-title-txt {
        color: #0079FD;
        display: inline-block;
        margin-top: 22px !important;
        font-weight: bold;
        font-size: 14px;
        color: #0079FD;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .gl-close {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        top: 12px;
        right: 10px;
        font-size: 18px;
        line-height: 20px;
    }

    .txt-btn {
        width: auto;
        position: absolute;
        top: 0px;
        right: 10px;
        color: #007aff;
        line-height: 44px;
        font-size: 14px;
    }
</style>
